<template>
  <el-card>
    <el-form :inline="true" :model="searchChargeRuleForm">
      <el-form-item label="计费规则编号">
        <el-input v-model="searchChargeRuleForm.num" placeholder="请输入内容"></el-input>
      </el-form-item>
      <el-form-item label="计费规则名称">
        <el-input v-model="searchChargeRuleForm.name" placeholder="请输入内容"></el-input>
      </el-form-item>
      <el-form-item label="用户类型">
        <el-select v-model="searchChargeRuleForm.userType" placeholder="请选择">
          <el-option label="全体车主" value="全体车主"></el-option>
<!--          <el-option label="包天卡车主" value="包天卡车主"></el-option>-->
<!--          <el-option label="时长卡车主" value="时长卡车主"></el-option>-->
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button @click="resetSearch">重置</el-button>
        <el-button type="primary" @click="loadChargeRule">查询</el-button>
      </el-form-item>
    </el-form>
    <el-form style="float: right">
      <el-form-item>
        <el-button type="primary" @click="addChargeRule">新增计费规则</el-button>
      </el-form-item>
    </el-form>
  </el-card>

  <el-card style="margin:20px;">
    <el-table :data="chargeRuleArr">
      <el-table-column type="selection" align="center"/>
      <el-table-column type="index" label="序号" width="80" align="center"/>
      <el-table-column prop="num" label="计费规则编号" align="center"/>
      <el-table-column prop="name" label="计费规则名称" align="center"/>
      <el-table-column prop="userType" label="用户类型" align="center"/>
      <el-table-column prop="chargeType" label="计费方式" align="center"/>
      <el-table-column prop="rule" label="计费规则" align="center"/>
      <el-table-column prop="freetime" label="免费时长(分钟)" align="center"/>
      <el-table-column prop="feeLimit" label="费用上限(元)" align="center"/>
<!--      <el-table-column prop="coverage" label="应用数量" align="center"/>-->
      <el-table-column label="操作" align="center">
        <template #default="scope">
          <el-button link type="primary" size="small" @click="loadRuleDetails(scope.row.id)">查看</el-button>
          <el-button link type="warning" size="small" @click="editRule(scope.row.id)">编辑</el-button>
          <el-button link type="danger" size="small" @click="deleteRule(scope.row.id)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
  </el-card>

  <el-dialog
      :title="dialogTitle"
      v-model="dialogVisible"
      width="60%"
      :before-close="handleClose"
  >
    <el-form label-width="120px">
      <el-row :gutter="20">
        <el-col :span="8">
          <el-form-item label="计费规则编号：">
            <el-input v-model="chargeRule.num" placeholder="请输入"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="16">
          <el-form-item label="计费规则名称：">
            <el-input v-model="chargeRule.name" placeholder="请输入"></el-input>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row :gutter="20">
        <el-col :span="8">
          <el-form-item label="免费时长：">
            <el-input-number v-model="chargeRule.freetime" :min="0" ></el-input-number>
            <span class="ml-2">分钟</span>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="24h收费限额：">
            <el-input-number v-model="chargeRule.feeLimit" :min="0" ></el-input-number>
            <span>元</span>
          </el-form-item>
        </el-col>
        <el-col :span="8" class="flex items-center" style="margin-top: 5px">
          <span class="">上限为0时，表示：无上限</span>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="6">
      <el-form-item label="用户类型：">
        <el-radio-group v-model="chargeRule.userType">
          <el-radio label="全体车主" value="全体车主"></el-radio>
<!--          <el-radio label="包天卡车主" value="包天卡车主"></el-radio>-->
<!--          <el-radio label="时长卡车主" value="时长卡车主"></el-radio>-->
        </el-radio-group>
      </el-form-item>
            </el-col>

        <el-col :span="6">
          <el-form-item label="停车场：">
            <el-select v-model="chargeRule.parkingId" placeholder="请选择停车场">
              <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>

      <el-form-item label="计费方式：">
        <el-radio-group v-model="chargeRule.chargeType">
          <el-radio label="时长计费">时长计费</el-radio>
        </el-radio-group>
      </el-form-item>

      <el-form-item label="计费规则：">
        <span>除指定时间段内，其余时间采用默认计费规则</span>
      </el-form-item>

      <el-form-item label="默认规则：">
        <el-row :gutter="20" style="display: flex; align-items: center;">
          <span style="margin-left: 10px;">每小时</span>
          <el-input-number v-model="chargeRule.price" :min="0" style="width: 150px; margin-right: 5px;"></el-input-number>
          <span>元。</span>
        </el-row>
      </el-form-item>

      <el-form-item>
        <el-button type="primary" @click="submitForm">确定</el-button>
        <el-button @click="handleClose">取消</el-button>
      </el-form-item>
    </el-form>
  </el-dialog>

  <el-dialog
      title="计费规则详情"
      v-model="viewDialogVisible"
      width="60%"
      :before-close="handleClose"
  >
    <el-form label-width="120px">
      <el-row :gutter="20">
        <el-col :span="8">
          <el-form-item label="计费规则编号：">
            <span>{{ chargeRule.num }}</span>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="计费规则名称：">
            <span>{{ chargeRule.name }}</span>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="用户类型：">
            <span>{{ chargeRule.userType }}</span>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row :gutter="20">
        <el-col :span="6">
          <el-form-item label="计费方式：">
            <span>{{ chargeRule.chargeType }}</span>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="免费时长：">
            <span>{{ chargeRule.freetime }} 分钟</span>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="24h收费限额：">
            <span>{{ chargeRule.feeLimit }} 元</span>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="应用数量：">
            <span>{{ chargeRule.coverage }}</span>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row >
        <el-col>
          <el-form-item label="计费规则：">
            <span>{{chargeRule.rule}}</span>
          </el-form-item>
        </el-col>
      </el-row>


    </el-form>
  </el-dialog>
</template>

<script setup>
import {ref,onMounted} from 'vue'
import { ElMessage } from 'element-plus'
import axios from "axios";
import qs from "qs";

const dialogVisible = ref(false)
const dialogTitle = ref()
const viewDialogVisible = ref(false)


const searchChargeRuleForm = ref({
  num: '',
  name: '',
  userType: '',
})

const chargeRule = ref({
  num: '',
  name: '',
  userType: '',
  chargeType: '',
  rule: '',
  price:5,
  freetime: 30,
  parkingId: '',
  feeLimit: 50
})
const options = [
  // {
  //   value: 'Option1',
  //   label: '停车场A'
  // }
];
const parkinglots = ref([]);
const getParkinglots = ()=>{
  axios.get(BASE_URL+'/parklot/list')
      .then((response)=>{//回调函数,服务器响应后执行此处代码
        /*response是响应对象,我们可以从response.data中获取服务器给的响应数据*/
        //console.log("response");
        console.log(response.data);//{code:2000,msg:'OK',data:null}
        //根据状态码判断是否获取停车场列表成功,进行不同的处理
        if(response.data.code==2000){/*获取停车场列表成功*/
          parkinglots.value = response.data.data;
          console.log(parkinglots.value);
          //将停车场数组赋值到options数组中
          options.splice(0,options.length);
          for(let i=0;i<parkinglots.value.length;i++){
            options.push({value:parkinglots.value[i].id,label:parkinglots.value[i].name});
            console.log(options);
          }
        }else{/*获取停车场列表失败*/
          ElMessage.error(response.data.msg);
        }
      })
}
const chargeRuleArr = ref([])

const addChargeRule = () => {
  dialogVisible.value = true
  dialogTitle.value = '新增计费规则'
  chargeRule.value = {
    num: '',
    name: '',
    userType: '',
    chargeType: '',
    rule: '',
    price:5,
    freetime: 30,
    feeLimit: 50,
  }
}

const loadChargeRule = () => {
  let data=qs.stringify(searchChargeRuleForm.value)
  axios.get(BASE_URL+'/v1/chargeRule/select/?'+data).then(response => {
    if (response.data.code==2000){
      chargeRuleArr.value = response.data.data
    }else {
      ElMessage.error(response.data.msg)
    }
  })
}

onMounted(()=> {
  getParkinglots();
  loadChargeRule()
})
const resetSearch = () => {
  searchChargeRuleForm.value = {
    num: '',
    name: '',
    userType: '',
  }
  loadChargeRule()
}

const handleClose = () => {
  if (confirm("确认关闭弹窗吗？")){
    dialogVisible.value = false
  }
}
// 确定按钮提交计费规则
const submitForm = () => {
  let data=qs.stringify(chargeRule.value)
  axios.post(BASE_URL+'/v1/chargeRule/save',data).then(response => {
    if (response.data.code==2000){
      if (chargeRule.value.id){
        ElMessage.success('计费规则修改成功')
      }else {
        ElMessage.success('计费规则添加成功')
      }
      dialogVisible.value = false
      loadChargeRule()
    }else {
      ElMessage.error(response.data.msg)
    }
  })
}
// 获取当前计费规则详情
const loadThisRule =(id)=>{
  for (let i = 0; i < chargeRuleArr.value.length; i++) {
    if (chargeRuleArr.value[i].id === id) {
      chargeRule.value = chargeRuleArr.value[i]
      break
    }
  }
}


// 编辑计费规则按钮
const editRule = (id) => {
  dialogVisible.value = true
  dialogTitle.value='编辑计费规则'
  // 从本地数组中取得当前所选的计费规则
  loadThisRule(id)
}

// 删除计费规则
const deleteRule = (id) => {
  axios.post(BASE_URL+'/v1/chargeRule/delete/'+id).then(response => {
    if (response.data.code==2000){
      ElMessage.success('计费规则删除成功')
      loadChargeRule()
    }else {
      ElMessage.error(response.data.msg)
    }
  })
}


// 查看计费规则按钮
const loadRuleDetails = (id) => {
  viewDialogVisible.value = true
  loadThisRule(id)
}

</script>

<style scoped>
.el-form-item {
  margin-bottom: 20px;
}
</style>